<template>
  <span class="inline-flex items-center justify-center rounded relative h-9 px-2" style="min-width: 60px">
    <span
      class="absolute inline-block inset-0 border border-solid rounded"
      :style="{ borderColor: color, backgroundColor: color }"
      style="opacity: 0.15"
    ></span>
    <span class="relative" :style="{ color }">{{ props.value || "--" }}</span>
  </span>
</template>

<script setup lang="ts">
import { colors } from "/@/style/style";

const props = withDefaults(
  defineProps<{
    value?: string;
    color?: string;
  }>(),
  {
    color: colors.secondary,
  }
);
</script>
